<template>
  <div class="main">
    <!-- <button @click="testshi">测试接口</button> -->
    <el-card class="box-card">
      <div>
        <el-input v-model="theD.name" placeholder="Please input" />
      </div>
      <div>
        <el-input
          v-model="theD.pw"
          placeholder="Please input"
          type="password"
        />
      </div>
      <div class="buttom_box">
        <el-button type="" @click="theD.dialogVisible = true">注册</el-button>
        <el-button type="primary" @click="login">登录</el-button>
      </div>
    </el-card>
  </div>

  <!-- 注册对话框 -->
  <el-dialog v-model="theD.dialogVisible" title="新用户注册" width="30%">
    <!-- 表单验证 -->
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input v-model.number="ruleForm.userName" />
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码确认" prop="checkPass">
        <el-input
          v-model="ruleForm.checkPass"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
 
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import user from "../api/user";
import { useRouter } from "vue-router";
import { useInfoStore } from "../store";
import { getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

const stroe = useInfoStore();
const router = useRouter();

const theD = reactive({
  name: "111",
  pw: "",
  dialogVisible: false,
});

const testshi = async()=>{
  const data = await user.test({
            Authorization: Authorization,
            // "Tenant-Id": this.form.usernumber,
            "Tenant-Id":2712003,
            "User-Type": "web",
          }, {
        username: 'admin1',
        password: 123,
        tenantId: 2712003,
        grant_type: 'password',
        type: 'account',
        scope: 'all',
        rememberMe: false,
      })
      console.log(data)
}

//登录
const login = async () => {
    const  data  = await user.login({ username: theD.name, password: theD.pw });
    if (data) {
      stroe.setToken("222");
      localStorage.setItem('token',222)
      router.push("/");
    } else {
    }
};
onMounted(()=>{
  if(localStorage.getItem('token')){
    stroe.setToken("222");
    router.push("/");
  }
})


//表单验证
//声明一个响应式常量
const ruleFormRef = ref();
//检查用户名
const checkUserName = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入用户名"));
  } else {
    callback();
  }
};

const validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("密码不能为空"));
  } else {
    if (ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== ruleForm.pass) {
    callback(new Error("两次密码不一致!"));
  } else {
    callback();
  }
};

const ruleForm = reactive({
  pass: "",
  checkPass: "",
  userName: "",
});

const rules = reactive({
  pass: [{ validator: validatePass, trigger: "blur" }],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
  userName: [{ validator: checkUserName, trigger: "blur" }],
});
// 提交
const submitForm = (formEl) => {
  if (!formEl) return;

  formEl.validate(async (valid) => {
    if (valid) {
      theD.dialogVisible = false;
      const  data  = await user.register({
        password: ruleForm.pass,
        username: ruleForm.userName,
      });
      console.log(data)
      if(data){
      }

    } else {
      proxy.ElMessage.error("error submit!");
      console.log("error submit!");

      return false;
    }
  });
};
//重置表单
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

const closeDialog = (formEl) => {
  resetForm(formEl);
  theD.dialogVisible = false;
};
</script>
<style scoped>
.main {
  background-image: url("../static/14558824_1350879506501.jpg");
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-card {
  width: 20%;
  height: 30%;
  background: rgba(255, 255, 255, 0.278);
}
:deep(.el-card .is-always-shadow .box-card) {
  background-color: antiquewhite;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-start;
}
.box-card .el-input {
  /* width: 200px;
     */
  margin-top: 30px;
}
.buttom_box {
  padding: 20px 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
